<template>
  <el-form ref="formData" :model="formData" :rules="rules">
    <el-form-item label="账号" prop="username">
      <el-input v-model.trim="formData.username" />
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model.trim="formData.name" />
    </el-form-item>
    <el-form-item label="所属单位" prop="orgName">
      <el-input v-model.trim="formData.orgName" />
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model.trim="formData.phone" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model.trim="formData.email" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit" :loading="loading">更新</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {
    saveUser,
    findByUsername,
    getUserRoleIdsById
  } from '@/api/system/user'
  import {
    isOk
  } from '@/utils/request'
  export default {
    props: {
      user: {
        type: Object,
        default: () => ({})
      }
    },
    watch: {
      user: {
        handler: function(value) {
          this.formData.id = value.id || '';
          this.formData.username = value.username || '';
        },
        immediate: true,
        deep: false
      }
    },
    created() {
      this.getUser()
    },
    data() {
      return {
        visible: false,
        title: '',
        loading: false,
        userRoles: [],
        formData: {
          id: '',
          username: '',
          name: '',
          orgName: '',
          phone: '',
          email: ''
        },
        rules: {
          username: [{
              required: true,
              message: '请输入名字.',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          orgName: [{
              required: true,
              message: '请输入名字.',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          name: [{
              required: true,
              message: '请输入名字.',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ],
          phone: [{
              required: true,
              message: '请输入手机号码.',
              trigger: 'blur'
            },
            {
              min: 11,
              max: 11,
              message: '手机号码有误.',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    methods: {
      getUser() {
        findByUsername(this.user.username).then(res => {
          if (isOk(res)) {
            this.formData.orgName = res.result.orgName
            this.formData.name = res.result.name
            this.formData.phone = res.result.phone
            this.getUserRoleIdsById();
          }
        })
      },
      getUserRoleIdsById() {
        getUserRoleIdsById({
            userId: this.formData.id
          }).then(response => {
            if (200 == response.code) {
              this.userRoles = response.result;
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {})
      },
      submit() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            saveUser({
                user: this.formData,
                roleIds: this.userRoles != null && this.userRoles != '' && this.userRoles != undefined ? this
                  .userRoles.join() : ''
              }).then(rsp => {
                //刷新数据
                this.$emit('loadCard')
                this.$message({
                  type: 'success',
                  message: '修改成功!',
                  duration: 5 * 1000
                })
              }).catch(err => {
                console.log(err);
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      }
    }
  }
</script>
